<template>
  <div class="myself">
    <div class="show-item"></div>
    <div class="myself-info">
      <img class="logo" src="../assets/default_logo.jpeg" alt="" />
      <h2 class="name">{{ data.websiteInfo.sysName }}</h2>
      <div class="line"></div>
      <span class="sign">{{ data.websiteInfo.sysDesc }}</span>
      <div class="gits">
        <a class="git-inner" href="https://gitea.caijiwang.cc" target="_blank">
          <SvgIcon name="gitea" class="icon"></SvgIcon>
        </a>
      </div>
      <div class="blog-count">
        <ul>
          <li>
            <span>{{ data.websiteCount.articleCount }}</span>
            <p>文章</p>
          </li>
          <li>
            <span>{{ data.websiteCount.talkCount }}</span>
            <p>说说</p>
          </li>
          <li>
            <span>{{ data.websiteCount.commentCount }}</span>
            <p>评论</p>
          </li>
          <li>
            <span>{{ data.websiteCount.tagCount }}</span>
            <p>标签</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, watch } from 'vue';
import useWebsiteInfoStore from '@/store/modules/websiteInfo.store.ts';
import { WebsiteCount, WebsiteInfo } from '@/http/public.type.ts';
import { _getWebsiteCount } from '@/share/share.service.ts';

const data = reactive({
  websiteInfo: {} as WebsiteInfo,
  websiteCount: {} as WebsiteCount
});

onMounted(() => {
  init();
  getWebsiteCount();
});

watch(
  () => useWebsiteInfoStore().websiteInfo,
  () => {
    init();
  }
);

const init = () => {
  data.websiteInfo = useWebsiteInfoStore().websiteInfo as WebsiteInfo;
};

function getWebsiteCount() {
  _getWebsiteCount().then((res) => {
    data.websiteCount = res.data;
  });
}
</script>

<style scoped lang="less">
.myself {
  width: 100%;
  height: 448px;

  background: linear-gradient(
    130deg,
    rgb(36, 198, 220),
    rgb(84, 51, 255) 41.07%,
    rgb(255, 0, 153) 76.05%
  );

  box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
    var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);

  border-radius: 20px;

  position: relative;

  .show-item {
    width: 96%;
    height: 88%;
    background-color: var(--background-secondary);
    opacity: 0.9;

    box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
      var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);

    border-radius: 15px;

    position: absolute;

    top: 10%;
    left: 50%;
    transform: translateX(-50%);
  }

  .myself-info {
    width: 200px;
    height: 380px;
    position: absolute;

    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    .logo {
      width: 100px;
      height: 100px;
      border-radius: 10000px;
      border-color: var(--background-primary);
      border-width: 6px;
      border-style: solid;

      box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
        var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);

      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 100;
    }

    .name {
      font-size: 35px;
      margin: 10px 0 10px 0;
    }

    .line {
      width: 80px;
      height: 4px;
      border-radius: 9999px;
      background: linear-gradient(
        130deg,
        rgb(36, 198, 220),
        rgb(84, 51, 255) 41.07%,
        rgb(255, 0, 153) 76.05%
      );
    }

    .sign {
      color: var(--font-color-sign);
      margin-top: 20px;
    }

    .gits {
      width: 200px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 20px;

      .git-inner {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;

        clip-path: polygon(50% 0%, 96% 24%, 96% 77%, 50% 100%, 5% 76%, 5% 26%);

        background-color: #cabdd3;

        .icon {
          width: 20px;
          height: 20px;
        }
      }
    }

    .blog-count {
      width: 240px;
      height: 50px;
      margin-top: 20px;

      ul {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin: 0;
        padding: 0;

        li {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          margin: 0;
          padding: 0;

          p {
            color: var(--font-color-sign);
            margin: 10px 0;
          }
        }
      }
    }
  }
}
</style>
